<style rel="stylesheet/scss" lang="scss" scoped>
	.new-pro-box {
		display: flex;
		flex: 1;
		height: 100%;
		box-sizing: border-box;
		flex-direction: column;
		padding: 0 10px;
		.new-pro-hread {
			padding: 10px;
			border: 1px solid #E5E5E5;
		}
		.new-pro-table {
			width: 100%;
			display: flex;
			flex: 1;
			flex-direction: column;
			margin-top: 10px;
			border: 1px solid #E5E5E5;
			.tab-creen {
				width: 100%;
				height: 50px;
				display: flex;
				padding: 0 10px;
				font-size: 14px;
				box-sizing: border-box;
				align-items: center;
			}
			.tab-con{
				flex: 1;
			}
			.tab-page{
				width: 100%;
				height: 60px;
			}
		}
		.property-box{
			display: flex;
			height: 100%;
		}
		.btn-flex{
			display: flex;
			align-items: center;
			padding: 5px 0;
			justify-content: center;
		}
		.flex-div{
			flex: 1;
			display: flex;
			flex-direction: column;
		}
		.third-box{
			flex: 1;
			display: flex;
			flex-direction: column;
		}
		.ter-div{
			flex: none;
			height: 47px;
		}
	}
</style>
<template>
	<div class="new-pro-box">
		<div class="new-pro-hread">
			<template>
				<el-steps :active="active" simple  style="height: 20px;">
					<el-step title="1选择品类"></el-step>
					<el-step title="2选择适配车型"></el-step>
					<el-step title="3编辑商品规格并保持"></el-step>
				</el-steps>
			</template>
		</div>
		<div v-if="active == 0" class="property-box">
			<property  @nextStep="nextStep" ></property>
		</div>
		<div v-if="active  == 1" class="flex-div">
			<!--待选车型-->
			<wait-model   @handleLinkFn="handleLinkFn"></wait-model>
			<!--已选车型-->
			<selected-model   ref="link" @setTableHead="setTableHead" @modelFlag="modelFlag" :pro-step="proStep"></selected-model>
			
			<div class="btn-flex">
				<el-button 
					type="primary" 
					@click="preStepFn(1)"
					size="mini"
					 >
					上一步
				</el-button>
				<el-button 
					type="primary" 
					:disabled="c_filter_next" 
					@click="next" 
					size="mini"
					>
					下一步
				</el-button>
			</div>
		</div>
		<div v-if="active  == 2" class="third-box">
			<!--编辑商品规格并保存-->
			<edit-product :goods-id="targetGoodId" :sec-cat-id="catId" class="ter-div"></edit-product>
			<edit-bute :goods-id="targetGoodId" :sec-cat-id="catId" ref="edit" @updateAttrStep="updateAttrStep"></edit-bute>
			<el-row class="btn-flex">
				<el-button 
					@click="preStepFn(2)"
					type="primary" 
					size="mini"
					>
					上一步
				</el-button>
				<el-button 
				size="mini"
					@click="saveAttrFn"
					type="primary"> 
					保存商品规格
				</el-button>
			</el-row>
		</div>
	</div>
</template>
<script>
	import {
		mapMutations,
		mapGetters
	} from 'vuex'
	import waitModel from './childComponents/wait-model.vue'
	import selectedModel from './childComponents/selected-model.vue'
	import property from './childComponents/property.vue'
	import editProduct from './childComponents/edit-product.vue'
	import editBute from './childComponents/edit-bute.vue'
	export default {
		props: {
			// 是否是新建或编辑
			proStep: {
				type: Boolean,
				default : false,
			},
			// 当前步骤
			step: {
				type: Number,
				default : '',
			},
			// 商品id
			goodsId: {
				type: String,
				default : '',
			},
			// 二级分类id
			secCatId: {
				type: String,
				default : '',
			}
		},
		created() {
			this.active = this.step
		},
		data() {
			return {
				active: 0,			// 设置当前步骤
				catId: '',			// catid 车型id
				stepFlag: true,		// 设置	
				targetGoodId: ''	// 设置商品id
			}
		},
		methods: {
			// 编辑配置
			updateAttrStep() {
				this.$emit('updateAttrStep')
			},
			// 保存商品规格
			saveAttrFn() {
				this.$refs.edit.updateAttrFn()
			},
			// 下一步
			next() {
				this.active = 2
				console.log(this.getStepCache)
			},
			// 切换步骤
			preStepFn(num) {
				console.log(num)
				this.active = num == 1 ? 0 : 1
				if(num == 2) {
					let attrObj = Object.assign({},this.getStepCache,{goBackFlag: true })
					console.log(attrObj)
					this.setStepCache(attrObj)
				}
				console.log(this.getStepCache)
			},
			modelFlag(falg) {
				this.stepFlag = falg;
			},
			nextStep(goodsId, catId) {
				this.targetGoodId = goodsId
				this.active = 1
				this.catId = catId 
				this.$emit('nextStep',goodsId, catId)
			},
			handleLinkFn() {
				this.$refs.link._initProList()
			},
			setTableHead() {
				this.$emit('setTableHead')
			},
			...mapMutations({
				setStepCache: 'SET_STEP_CACHE',
			})
			
		},
		computed: {
			c_filter_next() {
				return this.stepFlag
			},
			...mapGetters([
				'getStepCache'
			])
		},
		components: {
			editBute,
			waitModel,
			property,
			editProduct,
			selectedModel
		}

	}
</script>
